<template>
  <div class="fourbox">
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="100px"
      label-position="left"
      :inline="true"
      :style="{ width: '100%' }"
    >
      <el-row :gutter="20">
        <el-col>
          <el-form-item label="元数据名" prop="name">
            <el-input
              v-model="formData.name"
              placeholder="请输入元数据名"
              clearable
              :disabled="true"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="元数据标识" prop="label">
            <el-input
              v-model="formData.label"
              placeholder="请输入元数据标识"
              clearable
              :disabled="true"
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="模块" prop="moduleName">
            <el-select
              v-model="formData.moduleName"
              placeholder="请选择模块"
              clearable
              :disabled="true"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in field103Options"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-form-item label-width="0" prop="checkList">
            <el-checkbox-group v-model="formData.checkList" size="medium">
              <el-checkbox
                v-for="(item, index) in field104Options"
                :key="index"
                :label="item.value"
                :disabled="true"
                class="checkoutList"
                >{{ item.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="描述" prop="description">
            <el-input
              v-model="formData.description"
              :disabled="true"
              placeholder="请输入描述"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row> 
        <el-col :span="2">
          <!-- <el-form-item label="字段"   > -->
          <div style="font-size:14px;    color: #606266;">字段</div>
        </el-col>
        <el-col :span="20">
          <el-table
            :data="tableData"
            border
            class="tableList"
            stripe
            max-height="150"
          >
            <el-table-column
              label="序号"
              align="center"
              fixed
              type="index"
              width="80"
            >
            </el-table-column>
            <el-table-column
              v-for="(item, idx) in currentColumn"
              :prop="item.prop"
              :label="item.label"
              :key="idx"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span v-if="item.prop === 'notNull'">
                  <el-checkbox v-model="scope.row.notNull"></el-checkbox>
                </span>
                <span v-else-if="item.prop === 'isUnique'">
                  <el-checkbox v-model="scope.row.isUnique"></el-checkbox>
                </span>
                <span v-else-if="item.prop === 'inGlobalSearch'">
                  <el-checkbox v-model="scope.row.inGlobalSearch"></el-checkbox>
                </span>
                <span v-else-if="item.prop === 'hideDays'">
                  <el-checkbox v-model="scope.row.hideDays"></el-checkbox>
                </span>
                <span v-else-if="item.prop === 'hideSeconds'">
                  <el-checkbox v-model="scope.row.hideSeconds"></el-checkbox>
                </span>
                <span v-else-if="item.prop === 'nonNegative'">
                  <el-checkbox v-model="scope.row.nonNegative"></el-checkbox>
                </span>
                <span v-else-if="item.prop === 'fetchIfEmpty'">
                  <el-checkbox v-model="scope.row.fetchIfEmpty"></el-checkbox>
                </span>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-form-item label="数据源" prop="dataSource" class="selectList">
        <el-select
          v-model="formData.dataSource"
          placeholder="请选择数据源"
          clearable
          :disabled="true"
          :style="{ width: '100%', marginBottom: '15px' }"
        >
          <el-option
            v-for="(item, index) in field103Options"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    steponeData: {
      type: Object,
    },
    stepTwoData: {
      type: Array,
    },
    tableColumn: {
      type: Array,
    },
    stepThreeData: {
      type: Object,
    },
  },
  data() {
    return {
      formData: {
        name: "",
        label: "",
        moduleName: "",
        checkList: [],
        description: "",
        dataSource: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入元数据名",
            trigger: "blur",
          },
        ],
        label: [
          {
            required: true,
            message: "请输入元数据标识",
            trigger: "blur",
          },
        ],
        moduleName: [
          {
            required: true,
            message: "请选择模块",
            trigger: "change",
          },
        ],
        dataSource: [
          {
            required: true,
            message: "请选择数据源",
            trigger: "change",
          },
        ],
        checkList: [],
        description: [],
      },
      field103Options: [
        {
          label: "选项1",
          value: 1,
        },
        {
          label: "选项2",
          value: 2,
        },
        {
          label: "选项3",
          value: 3,
        },
        {
          label: "选项4",
          value: 4,
        },
      ],
      field104Options: [
        {
          label: "子表",
          value: "子表",
        },
        {
          label: "单例",
          value: "单例",
        },
        {
          label: "内部",
          value: "内部",
        },
        {
          label: "第三方",
          value: "第三方",
        },
      ],
      dialogVisible: false,
      currentColumn: [],
      tableData: [],
    };
  },
  computed: {},
  created() {},
  mounted() {
    console.log(this.steponeData);
    this.formData = Object.assign(this.formData, this.steponeData);
    this.tableData = this.stepTwoData;
    this.currentColumn = this.tableColumn;
    console.log(this.tableData);
    console.log(this.currentColumn);
    this.formData["dataSource"] = this.stepThreeData.dataSource;
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.fourbox {
  width: 56%;
  margin: 25px auto 0px;
}
.el-form-item {
  width: 100%;
  margin-bottom: 10px;
}
::v-deep .el-table td.el-table__cell {
  padding: 2px !important;
}
::v-deep .el-form-item__content {
  width: 80%;
}
::v-deep .el-form-item {
  margin-bottom: 19px;
}
.el-checkbox {
  width: calc(87% / 2);
  position: relative;
}
::v-deep .el-checkbox-group {
  margin-left: 100px;
}
::v-deep .checkoutList .el-checkbox__inner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
::v-deep .checkoutList .is-checked .el-checkbox__inner {
  background-color: #fff !important;
}
::v-deep .checkoutList .is-checked .el-checkbox__inner::after {
  // background: $base-menu-light-background !important;
  background: $labelColor;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: 4px;
  top: 4px;
}
.tableList {
  // padding-left: 5px;
  width: 96%;
  margin-left: 38px;
  margin-bottom: 19px;
  display: inline-block;
}
// ::v-deep .tableList .el-form-item__content {
//   width: 87% !important;
// }
</style>
<style scoped>
/deep/.el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background-color: #f2f6fc !important;
}
/deep/.el-table th.el-table__cell.is-leaf {
  padding: 2px;
}
/deep/.tableList .el-table {
  border: 1px solid #dfe6ec;
}
</style>
